<template>
	<view class="center">
		<hea-ders title="信用凭证">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text class="text" slot="official">提交</text>
		</hea-ders>
		<view class="credit_one">
			<text>真实姓名</text>
			<input type="text" value="" placeholder="" />
		</view>
		<view class="credit_one">
			<text>身份证号码</text>
			<input type="text" value="" placeholder="" />
		</view>
		<view class="credit_two credit_twos" @click="addimage(0)">
			<image :src="src" mode="aspectFit"></image>
		</view>
		<view class="credit_two" >
			<!-- <image :src="src" mode="aspectFit"></image> -->
			<image src="../../../static/images/tu2.png" mode=""></image>
		</view>
		<view class="credit_two">
			<image src="../../../static/images/tu3.png" mode=""></image>
		</view>
		<view class="credit_two" >
			<image src="../../../static/images/tu4.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			heaDers
		},
		data() {
			return {
				src: "../../../static/images/tu1.png",
				coucct: 0,
				titles:0,
			};
		},
		methods: {
			addimage(index) {
				console.log(index);
				uni.chooseImage({
					success: (chooseImageRes) => {
						this.coucct = index
						console.log(this.coucct);
						const tempFilePaths = chooseImageRes.tempFilePaths[0];
						this.src = tempFilePaths
						console.log(this.src)
						// uni.uploadFile({
						//     url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
						//     filePath: tempFilePaths[0],
						//     name: 'file',
						//     formData: {
						//         'user': 'test'
						//     },
						//     success: (uploadFileRes) => {
						//         console.log(uploadFileRes.data);
						//     }
						// });
					}
				});
			},
		
		}
	}
</script>

<style lang="scss">
	.center {
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 22rpx;
			}

			.text {
				font-size: 24rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}

		.credit_one {
			display: flex;
			align-items: center;
			// justify-content: space-around;
			width: 600rpx;
			font-size: 24rpx;
			height: 64rpx;
			padding: 20rpx 75rpx 10rpx 75rpx;

			text {
				text-align: center;
				height: 64rpx;
				background: #F3F3F3;
				border: 1px solid #BDBDBD;
				padding: 0rpx 40rpx;
				line-height: 64rpx;
				width: 200rpx;
				color: #616161;
			}

			input {
				height: 64rpx;
				width: 400rpx;
				background: #fff;
				border: 1px solid #BDBDBD;
				padding: 0rpx 20rpx;

			}
		}

		.credit_twos {
			padding-top: 20rpx;
		}

		.credit_two {
			text-align: center;
			padding-bottom: 20rpx;

			image {
				width: 600rpx;
				height: 380rpx;

			}
		}
	}
</style>
